<template>
  <div>
    <div id="video-box" style="width: 100%; height: 500px"></div>
  </div>
</template>

<script>
import { getVideoSourceId, getVideoUrl, getVideoAuth } from "@/api/video";
export default {
  data() {
    return {};
  },
  props: {
    videosource: Object,
  },
  watch: {
    videosource: {
      deep: true,
      handler(newVal) {
        this.init();
      },
    },
  },
  mounted: function () {
    this.init();
  },
  methods: {
    init() {
      let videoSourceId = "";
      let videoAuth = "";
      getVideoSourceId(this.videosource.id).then((res) => {
        videoSourceId = res.data.videoSourceId;
        getVideoAuth(videoSourceId).then((res) => {
          videoAuth = res.data.playAuth;

          new Aliplayer(
            {
              id: "video-box",
              width: "100%",
              autoplay: true,
              height: "100%",
              vid: videoSourceId,
              playauth: videoAuth,
              format: "mp4",
            },
            function (player) {
              console.log("播放器创建好了。");
            }
          );
        });
      });
    },
  },
};
</script>

<style>
.bjc-player-wrapper {
  width: 100%;
  height: 100%;
}
.bjc-player-wrapper .video-js {
  width: 100%;
  height: 100%;
}
</style>
